<div class="set-c">
  
  <nz-header class="account-header">
    <p>基本设置</p>
  </nz-header>
  
  <nz-content class="account-body" >
    <div nz-row>
      <label nz-col nzSpan="3">
        登陆密码
      </label>
      <div nz-col nzSpan="16">
        <span>已启用</span>
        <span >登陆账户时使用</span>
      </div>
      <div nz-col>
        <a (click)='showModal("修改登陆密码")'>修改</a>
        <span>|</span>
        <a (click)='showModal("重置登陆密码")'>重置</a>
      </div>
    </div>

    <div nz-row>
      <label nz-col nzSpan="3">
          支付密码
      </label>
      <div nz-col nzSpan="16">
        <span>{{_user.isFundPwd ? '已启用' : '未启用'}} </span>
        <span >账户资金支出或资料变更时，需先验证支付密码</span>
      </div>
      <div nz-col [ngSwitch]="_user.isFundPwd">
        <ng-container *ngSwitchCase="true">
            <a (click)='showModal("修改支付密码")' >修改</a>
            <span>|</span>
            <a (click)='showModal("重置支付密码")'>重置</a>
        </ng-container>
        <ng-container *ngSwitchCase="false">
            <a (click)='showModal("设置支付密码")'>设置支付密码</a>
        </ng-container>
      </div>
    </div>

  </nz-content>

</div>

<!-- 彈框 -->
<nz-modal nzWidth="398px" class="banks-from" [(nzVisible)]="_isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="null" [nzClosable]='false' [nzFooter]='null' >
   
    <ng-template #modalTitle >
        <h4>{{_altTitle}}</h4>
    </ng-template>

    <ng-template #modalContent>
        <form nz-form [formGroup]="validateForm" >

          <nz-form-item style="margin-bottom: 0;" *ngIf='!_isEdit'>
            <nz-form-label [nzSpan]="24" >验证码发送至</nz-form-label>
            <p style="font-size: 23px;">{{_user.loginId}}</p>
          </nz-form-item>

          <nz-form-item *ngIf='!_isEdit'>
            <nz-form-label [nzSpan]="24" nzRequired>验证码</nz-form-label>
            <nz-form-control  [nzSpan]="24" nzHasFeedback >

              <nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixButton">
                  <input nz-input placeholder="请输入验证码" formControlName="verifyCode" >
              </nz-input-group>
              <ng-template #suffixButton>
                <button style="height:52px" nz-button nzType="default" nzSize="large" nzSearch (click)="_getCaptcha()">{{captchaLabel}}</button>
              </ng-template>
              <nz-form-explain *ngIf="validateForm.get('verifyCode').dirty&&validateForm.get('verifyCode').errors">请输入户验证码</nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf='_altTitle == "修改登陆密码"  '>
            <nz-form-label [nzSpan]="24" nzRequired>旧密码</nz-form-label>
            <nz-form-control  [nzSpan]="24" nzHasFeedback >
              <input nz-input type="password" formControlName="oldPwd" placeholder="请输入旧密码"  nzRequired autocomplete="off" >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('oldPwd').dirty&&validateForm.get('oldPwd').errors">
                  <ng-container *ngIf="validateForm.get('oldPwd').hasError('required')">
                    请输入用户旧密码
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('oldPwd').hasError('pattern')">
                      密码格式不正确
                    </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf=' _altTitle == "修改支付密码"  '>
            <nz-form-label [nzSpan]="24" nzRequired>旧密码</nz-form-label>
            <nz-form-control  [nzSpan]="24" nzHasFeedback >
              <input nz-input type="password" formControlName="oldFundPwd" placeholder="请输入旧密码"  nzRequired autocomplete="off" >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('oldFundPwd').dirty&&validateForm.get('oldFundPwd').errors">
                  <ng-container *ngIf="validateForm.get('oldFundPwd').hasError('required')">
                    请输入用户旧密码
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('oldFundPwd').hasError('pattern')">
                      密码格式不正确
                    </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf='_altTitle == "修改登陆密码" || _altTitle == "重置登陆密码" '>
            <nz-form-label [nzSpan]="24" nzRequired>新密码</nz-form-label>
            <nz-form-control  [nzSpan]="24" nzHasFeedback >
              <input type="password" nz-input formControlName="newPwd" placeholder="请输入新密码"  nzRequired (ngModelChange)="updateConfirmValidator()" autocomplete="new-password" >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('newPwd').dirty&&validateForm.get('newPwd').errors">
                  <ng-container *ngIf="validateForm.get('newPwd').hasError('required')">
                    密码必填
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('newPwd').hasError('pattern')">
                    密码格式不正确
                  </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf='_altTitle == "修改支付密码" || _altTitle == "重置支付密码" || _altTitle == "设置支付密码"'>
            <nz-form-label *ngIf='_altTitle == "修改支付密码" || _altTitle == "重置支付密码"' [nzSpan]="24" nzRequired>新密码</nz-form-label>
            <nz-form-label *ngIf=' _altTitle == "设置支付密码"' [nzSpan]="24" nzRequired>密码</nz-form-label>
            <nz-form-control  [nzSpan]="24" nzHasFeedback >
              <input type="password" nz-input formControlName="newFundPwd" placeholder="请输入新密码"  nzRequired (ngModelChange)="updateConfirmValidator()" autocomplete="new-password" >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('newFundPwd').dirty&&validateForm.get('newFundPwd').errors">
                  <ng-container *ngIf="validateForm.get('newFundPwd').hasError('required')">
                    密码必填
                  </ng-container>
                  <ng-container *ngIf="validateForm.get('newFundPwd').hasError('pattern')">
                    密码格式不正确
                  </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          

          <nz-form-item *ngIf='_altTitle == "重置登陆密码" || _altTitle == "修改登陆密码" '> 
            <nz-form-label [nzSpan]="24" nzRequired nzFor="newConfirmPwd" >确认密码</nz-form-label>
            <nz-form-control  [nzSpan]="24"  >
              <input type="password" nz-input formControlName="newConfirmPwd" placeholder="请输入密码" autocomplete="new-password"  >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('newConfirmPwd').dirty && validateForm.get('newConfirmPwd').errors">
                <ng-container *ngIf="validateForm.get('newConfirmPwd').hasError('required')">
                  密码必填
                </ng-container>
                <ng-container *ngIf="validateForm.get('newConfirmPwd').hasError('confirm')">
                  密码不一致
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          
          <nz-form-item *ngIf='_altTitle == "重置支付密码" || _altTitle == "修改支付密码" || _altTitle == "设置支付密码"'> 
            <nz-form-label [nzSpan]="24" nzRequired nzFor="newConfirmFundPwd" >确认密码</nz-form-label>
            <nz-form-control  [nzSpan]="24"  >
              <input type="password" nz-input formControlName="newConfirmFundPwd" placeholder="请输入密码" autocomplete="new-password"  >
              <nz-form-explain style="color:red" *ngIf="validateForm.get('newConfirmFundPwd').dirty && validateForm.get('newConfirmFundPwd').errors">
                <ng-container *ngIf="validateForm.get('newConfirmFundPwd').hasError('required')">
                  密码必填
                </ng-container>
                <ng-container *ngIf="validateForm.get('newConfirmFundPwd').hasError('confirm')">
                  密码不一致
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>

        </form>
        <div  class="from-footer">
          <button nz-button nzType="primary" [disabled]="!validateForm.valid"  (click)="handleOk(validateForm.value)">确认</button>
          <button nz-button nzType="default" (click)="handleCancel()" [nzLoading]="isConfirmLoading">取消</button>
        </div>
    </ng-template>

  </nz-modal>